<template>
  <div class="forget" style='background-color: #fff;height:525px'>
    <Row>
      <!-- 标题 -->
      <Col span="24" class="titleset">
      <Divider>
        <h1>忘记密码</h1>
      </Divider>
      </Col>
      <!-- 进度条 -->
      <Col span="24" class="stepset">
      <Steps :current="current">
        <Step title="邮箱验证"></Step>
        <Step title="修改密码"></Step>
        <Step title="修改成功"></Step>
      </Steps>
      </Col>
      <!-- 步骤 1 的界面 -->
      <template v-if="current==0">
        <Col span="24" class="inputset">
        <Input prefix="ios-at-outline" placeholder="输入邮箱" style="width: 210px" size="large" type="email" v-model="email" />
        </Col>
        <!-- 判断是否发送了验证码 ,发送了则弹出输入验证码的输入框-->
        <transition name="forget-email" mode="out-in">
          <div v-if="!sendMail" key="first">
            <Col span="24" class="colbtnset">
            <Button type="primary" @click="btnActionsMail" long style="width: 210px">发送验证码</Button>
            </Col>
          </div>
          <div v-else key="later">
            <Col span="24" class="inputset">
            <Input prefix="ios-key" placeholder="输入验证码" style="width: 210px" size="large" v-model="vertify" />
            </Col>
            <Col span="24" class="colbtnset">
            <!-- 60s 内不能再次发送 -->
            <template v-if="!timeAble">
              <Button type="primary" disabled long style="width: 210px">{{time}}s后重新发送验证码</Button>
            </template>
            <template v-else>
              <Button type="primary" @click="btnActionsMail" long style="width: 210px">重新发送验证码</Button>
            </template>
            </Col>
            <Col span="24" class="colbtnset">
            <Button style="width: 210px" type="primary" long @click="btnActionsVertify">下一步</Button>
            </Col>
          </div>
        </transition>
      </template>

      <!-- 步骤 2 的界面 -->
      <template v-if="current==1">
        <Col span="24" class="inputset">
        <Input prefix="ios-medical" placeholder="输入新密码" style="width: 210px" size="large" type="password" v-model="newpassword" />
        </Col>
        <Col span="24" class="inputset">
        <Input prefix="ios-medical" placeholder="确认新密码" style="width: 210px" size="large" type="password" v-model="cotifypassword"
        />
        </Col>
        <Col span="24" class="colbtnset">
        <Button style="width: 210px" type="primary" @click="btnActionsChange" long>下一步</Button>
        </Col>
      </template>

      <!-- 步骤 3 的页面 -->
      <template v-if="current==2">
        <Col span="24" class="cardSet">
        <Card style="width:320px">
          <div style="text-align:center">
            <h3 @click="btnActionLogin">修改密码成功,点击自动登录</h3>
          </div>
        </Card>
        </Col>
      </template>
    </Row>
  </div>
</template>


<script>
  import md5 from "md5";

  export default {
    data() {
      return {
        current: 0, //当前进度条的完成度
        email: "", //存放输入的邮箱
        vertify: "", //存放输入的验证码
        username: "", //存放输入的用户名
        newpassword: "", //存放输入的密码
        cotifypassword: "", //确认前后两次输入正确
        sendMail: false, //是否发送了邮件
        secret: this.$Global.url.secret, //密钥
        url: {
          userregister: this.$Global.url.userregister, //注册用户
          checkMail: this.$Global.url.checkMail, //检查邮箱存在API
          emailCode: this.$Global.url.emailCode, //发送和检查验证码API
          login: this.$Global.url.login, //登录用户
          findpwd: this.$Global.url.findpwd //找回密码
        },
        time: "", //设定时间再次发送邮件
        timeAble: "" //时间到了，按钮可以点击
      };
    },
    methods: {
      //*************************************************页面切换********************************************
      /**
       * 进入下一步，若不存在，则不能点
       */
      next() {
        this.current += 1;
      },
      //******************************************************邮箱*****************************************
      /**
       * 验证邮箱是否存在，若不存在发送验证码
       */
      btnActionsMail() {
        if (this.email === '') {
          this.$Message.warning("邮箱不能为空");
          return;
        }
        this.sendMail = true;
        this.timeAble = false;
        this.time = 60;
        this.$http
          .get(this.url.checkMail, { params: { email: this.email } })
          .then(res => {
            if (res.status == 200) {
              var exist = res.data.exist;
              if (exist) {
                this.emailCode();
              } else {
                this.$Message.warning("邮箱不存在，请选择注册账户");
                this.countTime();
              }
            }
          })
          .catch(error => console.log(error));
      },
      /**
       * 向邮箱发送验证码
       */
      emailCode() {
        this.$Loading.start();
        this.countTime();
        this.$http
          .get(this.url.emailCode, { params: { email: this.email } })
          .then(res => {
            if (res.status == 200) {
              this.$Message.info(res.data.message);
              this.$Loading.finish();
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
      },

      /**
       * 先进行邮箱验证码验证，验证成功进入下一步，
       */
      btnActionsVertify() {
        this.$Loading.start();
        var reg = /^[0-9]{6}$/
        if (!reg.test(this.vertify)) {
          this.$Message.warning("请输入 6 位验证码");
          return;
        }
        this.$http
          .post(this.url.emailCode, {
            email: this.email,
            code: this.vertify
          })
          .then(res => {
            if (res.status == 200) {
              if (res.data.success) {
                this.$Message.success(res.data.message);
                this.$Loading.finish();
                this.next();
              } else {
                this.$Message.warning(res.data.message);
              }
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
      },

      /**
       * 上传修改的密码
       */
      btnActionsChange() {
        this.$Loading.start();
        if (this.newpassword === this.cotifypassword) {
          this.mdSecret();
          this.$http
            .post(this.url.findpwd, {
              email: this.email,
              secret: this.secret,
              password: this.newpassword
            })
            .then(res => {
              if (res.status == 200) {
                // console.log(res)
                this.$Message.success(res.data.message);
                let success = res.data.success;
                if (success) {
                  this.$Loading.finish();
                  this.next();
                }
              }
            })
            .catch(error => {
              this.$Loading.error();
              console.log(error);
            });
        } else {
          this.$Loading.error();
          this.$Message.error("前后两次输入不一致");
        }
      },

      /**
       * 注册完成，跳转回已经登录的界面   
       */
      btnActionLogin() {
        this.$Loading.start();
        this.$http
          .post(this.url.login, {
            email: this.email,
            password: this.newpassword
          })
          .then(res => {
            if (res.status == 200) {
              var success = res.data.success;
              if (success) {
                this.$Message.success(res.data.message);
                var token = res.data.account.token;
                var name = res.data.account.name;
                this.$store.commit("login", token);
                this.$store.commit("userName", name);
                this.$Loading.finish();
                this.$router.push({ name: "home" });
              } else {
                this.$Message.success(res.data.message);
              }
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
      },

      /**
       * 计算时间，开启重新发送邮件
       */
      countTime() {
        let clock = window.setInterval(() => {
          if (this.time > 0) {
            this.time--;
          } else {
            return (this.timeAble = true);
          }
        }, 1000);
      },

      /**
       * MD5 密钥加密
       */
      mdSecret() {
        // MD5 一次
        let result1 = md5(this.secret);
        // 取得MD5结果从7到17位的字符串
        let str2 = result1.substring(6, 16);
        // 第一次MD5+str2再MD5一次
        let str3 = result1 + str2;
        this.secret = md5(str3);
      }
    },

    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.checkMail =
          this.$Global.url.baseUrl + this.$Global.url.checkMail;
        this.url.emailCode =
          this.$Global.url.baseUrl + this.$Global.url.emailCode;
        this.url.userregister =
          this.$Global.url.baseUrl + this.$Global.url.userregister;
        this.url.login = this.$Global.url.baseUrl + this.$Global.url.login;
        this.url.findpwd = this.$Global.url.baseUrl + this.$Global.url.findpwd;
      }
    }
  };
</script>

<style>
  .titleset {
    margin-top: 50px;
  }

  .stepset {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 115px;
  }

  .colbtnset {
    /* margin-top: 20px; */
    margin-bottom: 20px;
    margin-left: 465px;
  }

  .inputset {
    margin-bottom: 20px;
    margin-left: 465px;
  }

  .cardSet {
    margin-bottom: 20px;
    margin-left: 410px;
  }

  .forget-email-enter-active {
    transition: all .7s ease;
  }

  .forget-email-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .forget-email-enter,
  .forget-email-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */

    {
    transform: translateX(10px);
    opacity: 0;
  }
</style>